<h3>普通表格</h3>
<div class="w-all" style="height:260px;" id="grid_1"></div>

<h3>列指定宽度</h3>
<div class="w-all" style="height:260px;" id="grid_2"></div>

<h3>操作栏</h3>
<div class="w-all" style="height:260px;" id="grid_3"></div>

<h3>XD表格</h3>
<div class="w-all" style="height:260px;" id="grid_4"></div>

<h3>无边框表格</h3>
<div class="w-all" style="height:260px;" id="grid_5"></div>
<script>
$(document).ready(function (){

	//-------------------------------------普通表格-------------------------------------------------------------

	var grid_head_1 = [
						{name:"code_1",text:"普通字段",tip:true,width:30,align:"left"},
						{name:"code_2",text:"渲染字段",render:function (txt,rowData){
							// txt 为当前字段的值,rowData为当前行的数据对象
							// return的值就是渲染在页面的值
							if (txt == "1")
								return '<span title="这里写你要写的title">渲染之的值</span>'
							else
								return "随意渲染"
						}},
						{name:"code_3",text:"带标签字段",renderType:"text"}
					  ]
	var grid_data_1 = [
						{code_1:"普通字段值1",code_2:"1",code_3:"<p>123</p>"},
						{code_1:"普通字段2",code_2:"2",code_3:"<p>456</p>"}
					  ]

	g_grid.render($("#grid_1") ,{
		header : grid_head_1,
		data : grid_data_1,
		hasIndex : true,
		cbf : function (){
			$("#grid_1").find("[data-id=check_all]").click(function (){
				console.log(g_grid.getData($("#grid_1") ,{}))
			})

			$("#grid_1").find("[data-id=check_inp]").click(function (){
				console.log($(this).closest("tr").data("data"))
			})
		}
	})

//---------------------------------------------列指定宽度-----------------------------------------------------

	// head的width属性,如果需要指定宽度，请为每列都加上，最终相加为100

	var grid_head_2 = [
						{name:"code_1",text:"普通字段",width:30},
						{name:"code_2",text:"渲染字段",width:70,render:function (txt,rowData){
							if (txt == "1")
								return "<span>渲染之后的值</span>"
							else
								return "随意渲染"
						}}
					  ]

	g_grid.render($("#grid_2") ,{
		header : grid_head_2,
		data : grid_data_1
	})

//---------------------------------------------操作栏-----------------------------------------------------

	// 需要指定一下操作栏的宽度,operWidth属性
	// 点击事件会将当前行数据对象作为参数传到定义的方法中去

	var grid_oper_3 = [{icon:"rh-icon rh-edit" ,text:"修改" ,aclick:aClick3}]

	g_grid.render($("#grid_3") ,{
		header : grid_head_1,
		data : grid_data_1,
		oper : grid_oper_3,
		operWidth : "50px"
	})

	function aClick3(rowData){
		console.log(rowData)
	}

//----------------------------------------------xd表格样式------------------------------------------------------------

	var grid_head_4 = [
						{name:"id",text:"字段1"},
						{name:"name",text:"字段2"}
					  ]

	g_grid.render($("#grid_4") ,{
		header : grid_head_4,
		url : "data/table_grid.json",
		type : "xd",
		dataKey : "list",
	})

//----------------------------------------------无边框表格------------------------------------------------------------
	g_grid.render($("#grid_5") ,{
		header : grid_head_1,
		data : grid_data_1,
		hasBorder : false,
		hasHeader : false
	})
})
</script>